<template>
  <PageWrapper title="HTML">
    <a-card v-for="item in questions" :key="item.id" :title="item.question">
      <template #extra>
        <a href="#">More</a>
      </template>
      <p v-html="item.answer" style="white-space: pre-wrap"></p>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { getInterviewQCategoriesApi } from '@/api/interviewQ/interviewQCategories';
  import { getInterviewQApi } from '@/api/interviewQ/interviewQ';
  import { PageWrapper } from '@/components/Page';
  import { get } from 'lodash-es';

  const questions = ref<any[]>([]);

  const getData = async () => {
    const categories: any[] = await new Promise((resolve) => {
      getInterviewQCategoriesApi({ name: '前端工程化' }).then((response) => {
        const _response = get(response, 'data');
        console.log('🚀 ~ res:', _response);
        const array: any[] = [];
        _response.data.forEach((item) => {
          array.push({
            id: item.id,
            title: item.name,
          });
        });
        resolve(array);
      });
    });
    console.log(categories);

    interface QqueryField {
      category_id: string;
    }

    questions.value = await new Promise((resolve) => {
      let query: QqueryField = { category_id: '' };
      categories.forEach((item) => {
        query.category_id = item.id;
      });
      getInterviewQApi(query).then((response) => {
        const _response = get(response, 'data');
        console.log('🚀 ~ res:', _response);
        const array: any[] = [];
        _response.data.forEach((item) => {
          array.push({
            id: item.id,
            question: item.question,
            answer: item.answer,
          });
        });
        resolve(array);
      });
    });
    console.log(questions);
  };

  getData();
</script>

<style lang="less" scoped></style>
